<template>
  <div class="global-monitoring">
    <el-row>
      <el-col :span="8">
        <div class="item">
          <div class="name">环境监控</div>
          <div class="icon-bgc">正常</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item">
          <div class="name">安防监控</div>
          <div class="icon-bgc">正常</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item">
          <div class="name">消防监控</div>
          <div class="icon-bgc">正常</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="item">
          <div class="name">联动控制</div>
          <div class="icon-bgc">正常</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item">
          <div class="name">测温监控</div>
          <div class="icon-bgc">正常</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item">
          <div class="name">电力监控</div>
          <div class="icon-bgc">正常</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.global-monitoring {
  width: 100%;
  height: 100%;
  padding-top: 34px;
  .item {
    width: 541px;
    height: 306px;
    background: url("../images/item-bgc.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28px;
    .name {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 22px;
      color: #ffffff;
    }
    .icon-bgc {
      /* background: url("../images/warning-icon.png") no-repeat; */
      background: url("../images/normal-icon.png") no-repeat;
      background-size: 100% 100%;
      width: 161px;
      height: 155px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 40px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 24px;
      color: #ffffff;
      padding-right: 10px;
      padding-top: 10px;
    }
  }
}
</style>
